<template>
    <div class="ChatSettingBG">
        <div class="ChatSettingTittle">
            <div>
                <el-input v-model="userInput" :prefix-icon="Search" class="el_input" placeholder="请输入对话内容"></el-input>
                <el-button @click="getChatList" class="el_button_primary" type="primary">查询</el-button>
            </div>
            <div>
                <el-button @click="delChatList" :icon="Delete" class="el_button_danger" type="danger">删除选中内容</el-button>
                <el-button @click="userInput='';getChatList()" :icon="Refresh" class="el_button_primary"
                    type="primary">&nbsp;&nbsp;刷新列表&nbsp;&nbsp;</el-button>
            </div>
        </div>
        <div class="ChatSettingContent">
            <el-table @selection-change="changeDelGoal" class="el_table" :data="ChatList" stripe table-layout="fixed">
                <el-table-column type="selection" width="55" />
                <el-table-column min-width="50" prop="id" align="center" label="记录id" />
                <el-table-column width="200" align="center" label="发送者">
                    <template #default="scope">{{ scope.row.identity == 1 ? scope.row.user["name"] : "GPT" }}</template>
                </el-table-column>
                <el-table-column min-width="300" prop="content" align="center" label="对话内容">
                    <template #default="scope">
                        <p class="ChatCont" @click="openContDialog(scope.row.content)">{{ scope.row.content }}</p>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="createTime" align="center" label="对话时间" />
            </el-table>
        </div>
        <div class="ChatSettingFooter">
            <el-pagination @change="changePage" class="el_pagination" :default-page-size="NowLength"
                :page-sizes="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="SumLength" />
        </div>
    </div>
    <el-dialog class="el_dialog" @close="closeContDialog" v-model="ShowMoreFlag" title="对话内容" width="500" align-center>
        <el-scrollbar height="400px">
            <p class="dialogP" v-html="ShowMoreCont"></p>
        </el-scrollbar>

    </el-dialog>
</template>

<script setup lang='js' name=''>
import { Search, Delete, Refresh } from '@element-plus/icons-vue'
import getChatListAPI from '@/api/main/ChatSetting/getChatList';
import delChatListAPI from '@/api/main/ChatSetting/delChatList';
import { ref } from 'vue'
import showMessage from '@/utils/showMessage';

// 聊天记录列表
const ChatList = ref([])
// 总条数
const SumLength = ref(0)

// 模糊查询内容
const userInput = ref('')

// 分页控制
const PageSize = [20, 50, 100, 150, 200]
const NowLength = ref(20)
const NowIndex = ref(1)

function changePage(a, b) {
    NowIndex.value = a
    NowLength.value = b
    getChatList()
}

// 详细对话内容
const ShowMoreFlag = ref(false)
const ShowMoreCont = ref("")
// 对话内容dialog控制
function openContDialog(mess) {
    ShowMoreFlag.value = true
    mess = mess.replace(/\n/g, "<br>")
    ShowMoreCont.value = mess
}
function closeContDialog() {
    ShowMoreFlag.value = false
    ShowMoreCont.value = ""
}

// 获取对话列表核心
async function getChatList() {
    showMessage("正在加载", "success")
    ChatList.value=[]
    const res = await getChatListAPI(NowIndex.value - 1, NowLength.value, userInput.value)
    showMessage("加载成功", "success")
    ChatList.value = res.data.data
    SumLength.value = res.data.count
}
getChatList()


// 删除对话列表内容
const delChatListID = ref("")
function changeDelGoal(e) {
    let mess=""
    e.forEach(element => {
        mess=mess+element.id+","
    });
    mess.slice(0, -1)
    delChatListID.value=mess.slice(0, -1)
}

// 删除对话列表
async function delChatList() {
    if (delChatListID.value != "") {
        const res =await delChatListAPI(delChatListID.value)
        showMessage("删除对话成功", "success")
        getChatList()
    } else {
        showMessage("未选中任何对话")
    }

}
</script>

<style scoped>
/* 主体框架 */
.ChatSettingBG {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.ChatSettingBG>*:nth-child(2) {
    flex: 1;
}

/* 头部 */
.ChatSettingTittle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
}

.ChatSettingTittle>* {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.ChatSettingTittle .el_input {
    width: 300px;
}

/* 内容 */
.ChatSettingContent {
    position: relative;
}

.el_table {
    width: 100%;
    height: 100%;
    position: absolute;
}

/* 底部 */
.ChatSettingFooter {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

/* 对话内容 */
.ChatCont {
    transition: all 0.5s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #409eff;
    font-weight: bold;
}

.ChatCont:hover {
    color: #3397fa;
}

.dialogP {
    color: var(--PchatSettingDialogColor);
}
</style>